<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../zysx/js/echarts.js"></script>

    <link rel="stylesheet" href="./center.css">
</head>
<body>
    <div class="center">
        <div class="center_look">
        <div class="center_left">
            浏览量<br>
                239,234 
        </div>
            <div class="center_right"><i class="fa fa-eye" aria-hidden="true"></i></div>
        </div>
        <div class="center_order">
            <div class="center_left">
                订单量<br>
                    239,234 
            </div>
            <div class="center_right"><i class="fa fa-shopping-bag" aria-hidden="true"></i></div>
        </div>
        <div class="center_money">
            <div class="center_left">
                总金额<br>
                    239,234 
            </div>
            <div class="center_right"><i class="fa fa-jpy" aria-hidden="true"></i></div>
        </div>
        <div class="center_goods">
            <div id="main1" style="width: 350px;height: 400px"></div>

        </div>
        <div class="center_sale">
            <div id="main" style="width: 700px;height: 400px;"></div>
            
        </div>
        
    </div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
    title: {
      text: '销售量'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#000'
        }
      }
    },
    legend: {
      data: ['零食', '女装', '彩妆', '百货', '水果']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '零食',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [620, 832, 101, 634, 90, 230, 210]
      },
      {
        name: '女装',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '彩妆',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [450, 232, 501, 154, 190, 330, 410]
      },
      {
        name: '百货',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: '水果',
        type: 'line',
        stack: 'Total',
        label: {
          show: true,
          position: 'top'
        },
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  };
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main1'));
     var option = {
  title: {
    text: '顾客人数下滑分析'
  },
  legend: {
    data: ['商家1', '商家2'],
    bottom:2
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: '商品比较贵', max: 6500 ,color:"rgba(0,0,0,1)"},
      { name: '质量差', max: 16000 ,color:"rgba(0,0,0,1)"},
      { name: '客服回复慢', max: 30000 ,color:"rgba(0,0,0,1)"},
      { name: '款式少', max: 38000 ,color:"rgba(0,0,0,1)"},
      { name: '发货慢', max: 52000 ,color:"rgba(0,0,0,1)"},
      { name: '物流慢', max: 25000 ,color:"rgba(0,0,0,1)"}
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: '商家1'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: '商家2'
        }
      ]
    }
  ]
};
myChart.setOption(option);
    </script>
</body>
</html>